<template>
  <div class="songs">
    <div class="left-aside">
      <h2 class="art-title">推荐</h2>
      <ul class="tuijian">
        <li>推荐歌手</li>
        <li>入驻歌手</li>
      </ul>
      <h2 class="art-title">华语</h2>
      <ul class="huayu">
        <li data-area="7" data-type="1">华语男歌手</li>
        <li data-area="7" data-type="2">华语女歌手</li>
        <li data-area="7" data-type="3">华语组合/乐队</li>
      </ul>
      <h2 class="art-title">欧美</h2>
      <ul class="oumei">
        <li data-area="96" data-type="1">欧美男歌手</li>
        <li data-area="96" data-type="2">欧美女歌手</li>
        <li data-area="96" data-type="3">欧美组合/乐队</li>
      </ul>
      <h2 class="art-title">日本</h2>
      <ul class="jpan">
        <li data-area="8" data-type="1">日本男歌手</li>
        <li data-area="8" data-type="2">日本女歌手</li>
        <li data-area="8" data-type="3">日本组合/乐队</li>
      </ul>
      <h2 class="art-title">韩国</h2>
      <ul class="hanguo">
        <li data-area="16" data-type="1">韩国男歌手</li>
        <li data-area="16" data-type="2">韩国女歌手</li>
        <li data-area="16" data-type="3">韩国组合/乐队</li>
      </ul>
      <h2 class="art-title">其他</h2>
      <ul class="hanguo">
        <li data-area="0" data-type="1">其他男歌手</li>
        <li data-area="0" data-type="2">其他女歌手</li>
        <li data-area="0" data-type="3">其他组合/乐队</li>
      </ul>
    </div>
    <div class="singer-list">
      <div class="songs-item">
        <div class="item-title">
          入驻歌手
          <span class="more">
            <a href="">更多 ></a>
          </span>
        </div>
        <ul id="perlist" class="clearfix"></ul>
      </div>
    </div>
    <div class="singer-list">
      <div class="songs-item">
        <div class="item-title">
          热门推荐
          <span class="more">
            <a href="">更多 ></a>
          </span>
        </div>
        <ul id="artise" class="clearfix">
            
          <li v-for="(item, index) in singerList" :key="index">
              <router-link :to="`/detail?id=${item.id}&name=${item.name}`">
            <img :src="item.picUrl" alt="" />
            <h3>{{ item.name }}</h3>
              </router-link>
          </li>
        </ul>
      </div>
      <ul id="list"></ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["singerList"],
};
</script>

<style lang="less" scoped>
</style>